<script setup lang="ts">

</script>

<template>
<div class="wrap">
  <header>Header</header>
  <main>
    <p>网格项目相互重叠（z 轴上的重叠）就有必要控制其 z 轴的优先级。在网格布局中，网格项目与定位元素（position 值 不是 static 的元素）相似， 可以是固体部分css 的 z-index 属性来控制其在 z轴上的层级。
      简单地说，z-index 越大，它越在顶层；如果没有显式设置 z-index 值来改变 z轴上的层级，将会由网格项目在文档中出现的先后顺序来决定，月往后出现，它在 z轴的层级越高</p>
  </main>
  <aside>Sidebar</aside>
  <nav>Nav</nav>
  <footer>Footer</footer>
</div>
</template>

<style scoped lang="scss">
.wrap {

  display: grid;
  gap: 16px;
  grid-template-columns: minmax(min-content, 220px) 1fr minmax(
      min-content,
          220px
    );
  grid-template-rows: auto 1fr auto;

  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", "Bungee Shade", cursive, Arial, sans-serif;
  background-color: #557;
  color: #fff;

  & > * {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    font-size: clamp(1.2rem, 1.5vw + 1.5rem, 1.75rem);
    text-shadow: 1px 1px 1px rgb(0 0 0 / 0.25);
    mix-blend-mode: difference;
    border: 4px solid;
  }

  header {
    grid-row: 1;
    grid-column: 1 / -1;
    background-color: #09f;
    border-color: #d81e85;
    //z-index: 1;
  }

  aside {
    grid-column: 3;
    grid-row: 1 / -1;
    background-color: #c2f;
    border-color: #bfff15;
  }

  main {
    grid-row: 2;
    grid-column: 2;
    background-color: #deaf09;
    border-color: #1ed879;
  }

  footer {
    grid-row: 3;
    grid-column: 1 / -1;
    background-color: #1b1b1b;
    border-color: #fff;
  }

  nav {
    grid-column: 1;
    grid-row: 1 / -1;
    background-color: #89aefc;
    border-color: #1b1b1b;
  }
}
</style>
